<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>道路门牌系统</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>

    <!--css-->
    <link rel="stylesheet" href="/css/ydui.css?rev=@@hash"/>
    <link rel="stylesheet" href="/css/demo.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
    <link rel="stylesheet" href="/css/webuploader.css"/>
    <link rel="stylesheet" href="/css/stylefile.css"/>
    <style>

    </style>
</head>
<body>
<section class="g-flexview">
    <header class="m-navbar"><a href="/xunjian/" class="navbar-item"><i class="back-ico"></i></a>
        <div class="navbar-center"><span class="navbar-title">发起门牌巡检</span></div>
    </header>
    <section class="g-scrollview">
        <div class="map-box">
            <!--百度地图容器-->
            <div style="height:250px;" id="dituContent"></div>
        </div>
        <div class="m-cell">
            <div class="cell-item">
                <!--        <div class="cell-left">检索门牌：</div>-->
                <div class="cell-right"><a style="font-size: 20px;padding-right: 10px;">
                    <i class="icon-search"></i>
                </a>
                    <input type="text" class="cell-input" id="address" placeholder="请输入地址"/>
                    <a class="zbmpbtn">
                        <i class="icon-location" style="color: #4CAF50;"></i><br/>
                        周边门牌</a>
                </div>
                <input type="hidden" id="lat">
                <input type="hidden" id="lng">
            </div>
        </div>
        <div class="m-cell">
            <div class="cell-item">
                <div class="cell-left">巡检人：</div>
                <div class="cell-right">
                    <input type="text" class="cell-input" id="anzhuangzheName" value="张小娴"/>
                </div>
            </div>
            <div class="cell-item">
                <div class="cell-left">巡检时间：</div>
                <div class="cell-right">
                    <input type="text" class="cell-input" id="addTime" value="2018-05-15 13:50"/>
                </div>
            </div>
        </div>
        <div class="m-cell">
            <div class="cell-item">
                <input type="hidden" id="xunjianExceptionStatus" th:value="需更新维护">
                <div class="cell-left">处理步骤：</div>
                <div class="cell-right">
                    <ul class="buzhoulist">
                        <li class="active">需更新维护</li>
                        <li id="zhuxiao">注销</li>

                    </ul>
                </div>

            </div>
            <!--&lt;!&ndash;隐藏的经纬度&ndash;&gt;-->
            <!--<input type="hidden" value="" id="lng">-->
            <!--<input type="hidden" value="" id="lat">-->
            <div class="m-celltitle">上传现场安装完成照片：</div>
            <div class="m-cell fileimgbox">
                    <span>
          <div id="fileList" class="uploader-list"></div>
          <input type="button" value="上传拍照" data-camare="paizhao"/>
                        <input type="hidden" id="imgUrl">
          </span>
            </div>
        </div>
        <div>

        </div>
        <div class="m-celltitle">备注：</div>
        <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                    <textarea class="cell-textarea" id="remark" placeholder="请输入"></textarea>
                </div>
            </div>
        </div>
        <button type="button" class="btn-block btn-primary" id="submit">提交</button>
        <button type="button" class="btn-block btn-hollow">取消</button>

    </section>

    </div>
</section>

<!--引用百度地图API-->
<!--js-->

<script src="/js/jquery-3.3.1.min.js"></script>
<!--照片上传器-->
<div style="display:none;">
    <input type="file" id="fileCamera" name="fileCamera" accept="image/*" capture="camera"/>
    <script type="text/javascript">
        $(document).ready(function () {
            (function ($file) {
                $("[data-camare]").each(function () {
                    $(this).on('click', function () {
                        var camare = $(this).data("camare");
                        $file.data("anchor", camare);
                        $file.click();
                    });
                });
                $file.on('change', function (e) {
                    if ($file.val() == "") {
                        return;
                    }

                    var formData = new FormData();
                    formData.append("file", this.files[0]);
                    $.ajax({
                        url: "/upload/photo",
                        type: 'POST',
                        dataType: "JSON",
                        data: formData,
                        processData: false,
                        contentType: false,
                        timeOut: 60000,
                        error: function () {
                            //$.mobile.hidePageLoadingMsg();
                            alert("上传材料失败");
                        },
                        beforeSend: function () {
                            //$.mobile.loadingMessageTextVisible = true;
                            //$.mobile.showPageLoadingMsg('a', "上传中");
                        },
                        complete: function (XMLHttpRequest, status) {
                            //$.mobile.hidePageLoadingMsg();
                            if (status == 'timeout') {
                                alert("上传材料超时");
                            }
                        },
                        success: function (data) {
                            if (data.code != 0) {
                                alert("上传材料失败");
                            } else {
                                var $camare = $("[data-camare=\"" + $file.data('anchor') + "\"]").first();
                                var $container = $($camare).parent('span');
                                var $phone = $("<img src='" + data.data.url + "' />");
                                $phone.on('click', function () {
                                    var ns = $(this).data('value').split('|');
                                    showPicture(ns[1], 0);
                                });
                                var $phonelist = $container.find('.uploader-list');
                                $phonelist.append($phone);
                                $("#imgUrl").val(data.data.url);
                                //$container.find('.ui-li-count').text($phonelist.find('img').length);
                            }
                            $file.val('');
                            //$.mobile.hidePageLoadingMsg();
                        }
                    });
                });
            })($file = $('#fileCamera'));
        });
    </script>

    <script src="/js/ydui.js"></script>
    <script src="/js/webuploader.js"></script>
    <script src="/js/ydui.flexible.js"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=79ztjfis0XStrHNpEpezr2za3iQNbW9f"></script>
    <script type="text/javascript">

        //更新维护
        $('.buzhoulist li').click(function () {
            $(this).toggleClass('active'); // 添加当前元素的样式
            $(this).siblings().removeClass('active'); // 删除其他兄弟元素的样式
            console.log(this.innerHTML);
            $("#xunjianExceptionStatus").val(this.innerText);


        });

        //创建和初始化地图函数：
        function initMap() {
            createMap();//创建地图
            setMapEvent();//设置地图事件
            addMapControl();//向地图添加控件
            addMarker();//向地图中添加marker
            addPolyline();//向地图中添加线
        }

        //创建地图函数：
        function createMap() {
            var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
            var point = new BMap.Point(108.95346, 34.265725);//定义一个中心点坐标
            map.centerAndZoom(point, 12);//设定地图的中心点和坐标并将地图显示在地图容器中
            window.map = map;//将map变量存储在全局
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function (e) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    var mk = new BMap.Marker(e.point);
                    map.addOverlay(mk);
                    map.panTo(e.point);
                    document.getElementById("lng").value = e.point.lng;
                    document.getElementById("lat").value = e.point.lat;
                    // console.log(document.getElementById("lng").value);
                    alert('您的位置：' + e.point.lng.value() + ',' + e.point.lat.value());
                    if (e.point.lng.value != "" && e.point.lat.value != "") {
                        map.clearOverlays();
                        var new_point = new BMap.Point(e.point.lng.value, e.point.lat.value);
                        var marker = new BMap.Marker(new_point);  // 创建标注
                        map.addOverlay(marker);              // 将标注添加到地图中
                        map.panTo(new_point);
                    }

                }
                else {
                    alert('failed' + this.getStatus());
                }
            }, {enableHighAccuracy: true})
            //单击获取点击的经纬度
            map.addEventListener("click", function (e) {
                map.clearOverlays();
                var new_point = new BMap.Point(e.point.lng, e.point.lat);
                var marker = new BMap.Marker(new_point);  // 创建标注
                map.addOverlay(marker);              // 将标注添加到地图中
                map.panTo(new_point);

                document.getElementById("lng").value = e.point.lng;
                document.getElementById("lat").value = e.point.lat;
            });


        }

        //地图事件设置函数：
        function setMapEvent() {
            map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
            map.enableScrollWheelZoom();//启用地图滚轮放大缩小
            map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
            map.enableKeyboard();//启用键盘上下左右键移动地图
        }

        //地图控件添加函数：
        function addMapControl() {
            //向地图中添加缩放控件
            var ctrl_nav = new BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                type: BMAP_NAVIGATION_CONTROL_LARGE
            });
            map.addControl(ctrl_nav);
            //向地图中添加缩略图控件
            var ctrl_ove = new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 0});
            map.addControl(ctrl_ove);
            //向地图中添加比例尺控件
            var ctrl_sca = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
            map.addControl(ctrl_sca);
        }

        //标注点数组
        var markerArr = [{
            title: "西安钟楼",
            content: "我的备注",
            point: "108.953378|34.265815",
            isOpen: 0,
            icon: {w: 23, h: 25, l: 46, t: 21, x: 9, lb: 12}
        }
        ];

        //创建marker
        function addMarker() {
            for (var i = 0; i < markerArr.length; i++) {
                var json = markerArr[i];
                var p0 = json.point.split("|")[0];
                var p1 = json.point.split("|")[1];
                var point = new BMap.Point(p0, p1);
                var iconImg = createIcon(json.icon);
                var marker = new BMap.Marker(point, {icon: iconImg});
                var iw = createInfoWindow(i);
                var label = new BMap.Label(json.title, {"offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20)});
                marker.setLabel(label);
                map.addOverlay(marker);
                label.setStyle({
                    borderColor: "#808080",
                    color: "#333",
                    cursor: "pointer"
                });

                (function () {
                    var index = i;
                    var _iw = createInfoWindow(i);
                    var _marker = marker;
                    _marker.addEventListener("click", function () {
                        this.openInfoWindow(_iw);
                    });
                    _iw.addEventListener("open", function () {
                        _marker.getLabel().hide();
                    })
                    _iw.addEventListener("close", function () {
                        _marker.getLabel().show();
                    })
                    label.addEventListener("click", function () {
                        _marker.openInfoWindow(_iw);
                    })
                    if (!!json.isOpen) {
                        label.hide();
                        _marker.openInfoWindow(_iw);
                    }
                })()
            }
        }

        //创建InfoWindow
        function createInfoWindow(i) {
            var json = markerArr[i];
            var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");
            return iw;
        }

        //创建一个Icon
        function createIcon(json) {
            var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w, json.h), {
                imageOffset: new BMap.Size(-json.l, -json.t),
                infoWindowOffset: new BMap.Size(json.lb + 5, 1),
                offset: new BMap.Size(json.x, json.h)
            })
            return icon;
        }

        //标注线数组
        var plPoints = [{
            style: "solid",
            weight: 4,
            color: "#f00",
            opacity: 0.6,
            points: ["108.946892|34.265636", "108.958265|34.265815", "108.958408|34.265845"]
        }
        ];

        //向地图中添加线函数
        function addPolyline() {
            for (var i = 0; i < plPoints.length; i++) {
                var json = plPoints[i];
                var points = [];
                for (var j = 0; j < json.points.length; j++) {
                    var p1 = json.points[j].split("|")[0];
                    var p2 = json.points[j].split("|")[1];
                    points.push(new BMap.Point(p1, p2));
                }
                var line = new BMap.Polyline(points, {
                    strokeStyle: json.style,
                    strokeWeight: json.weight,
                    strokeColor: json.color,
                    strokeOpacity: json.opacity
                });
                map.addOverlay(line);
            }
        }

        initMap();//创建和初始化地图




        $("#submit").click(function () {
            console.log(window.location.pathname.split("/"));
            console.log($("#addTime").val());
            var taskId = window.location.pathname.split("/")[3];
            var doorPlateId = window.location.pathname.split("/")[4];
            console.log(taskId + "   " + doorPlateId);
            /**
             * 表单提交
             */
            $.ajax({
                type: 'POST',
                url: "/xunjian/save",
                data: {
                    "taskId": taskId,
                    "doorPlateId": doorPlateId,
                    "anzhuangzheName": $("#anzhuangzheName").val(),
                    "lat": $("#lat").val(),
                    "lng": $("#lng").val(),
                    "imgUrl": $("#imgUrl").val(),
                    "remark": $("#remark").val(),
                    "xunjianExceptionStatus": $("#xunjianExceptionStatus").val(),
                    "addTime": $("#addTime").val()

                },
                success: function (data) {
                    console.log(data);
                    if (data.code == 0) {
                        window.location.href = "/xunjian/list/" + taskId;
                    } else {
                        alert("提交失败" + data.message);
                    }
                }

            })
        });


    </script>

</body>
</html>
